<template>
    <div class="home-page">
        <div class="left">
            <div class="lefttop" style="width: 300px; height: 300px;"></div>
            <div class="leftbot" style="width: 310px; height: 300px;"></div>
        </div>
        <div class="con" style="width: 620px; height: 700px;"></div>
        <div class="right">
            <div class="righttop" style="width: 300px;height: 300px;"></div>
            <div class="rightcon"></div>
            <div class="rightbot"></div>
        </div>
    </div>
</template>

<script setup>
import * as echarts from 'echarts';
import { onMounted } from 'vue';
import axios from 'axios';

onMounted(() => {
    const lefttop = document.querySelector('.lefttop');
    const myChart = echarts.init(lefttop);
    const option = {

        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        legend: {
            data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
        },

        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                boundaryGap: false,
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: [
            {
                name: 'Email',
                type: 'line',
                stack: 'Total',
                areaStyle: {},
                emphasis: {
                    focus: 'series'
                },
                data: [120, 132, 101, 134, 90, 230, 210]
            },
            {
                name: 'Union Ads',
                type: 'line',
                stack: 'Total',
                areaStyle: {},
                emphasis: {
                    focus: 'series'
                },
                data: [220, 182, 191, 234, 290, 330, 310]
            },
            {
                name: 'Video Ads',
                type: 'line',
                stack: 'Total',
                areaStyle: {},
                emphasis: {
                    focus: 'series'
                },
                data: [150, 232, 201, 154, 190, 330, 410]
            },
            {
                name: 'Direct',
                type: 'line',
                stack: 'Total',
                areaStyle: {},
                emphasis: {
                    focus: 'series'
                },
                data: [320, 332, 301, 334, 390, 330, 320]
            },
            {
                name: 'Search Engine',
                type: 'line',
                stack: 'Total',
                label: {
                    show: true,
                    position: 'top'
                },
                areaStyle: {},
                emphasis: {
                    focus: 'series'
                },
                data: [820, 932, 901, 934, 1290, 1330, 1320]
            }
        ]
    };
    myChart.setOption(option)

    const leftbot = document.querySelector('.leftbot')
    const myChart1 = echarts.init(leftbot)

    const option1 = {
        yAxis: {
            type: 'category',
            data: ['商家1', '商家2', '商家3', '商家4', '商家5']
        },
        xAxis: {
            type: 'value'
        },
        series: [
            {
                data: [120, 200, 150, 80, 70],
                type: 'bar',
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(
                        0, 0, 1, 0, [{
                            offset: 0,
                            color: 'pink'
                        }, {
                            offset: 1,
                            color: 'orange'
                        }]
                    ),
                    barBorderRadius: [0, 15, 15, 0]
                }
            }
        ]
    };

    myChart1.setOption(option1)

    const con = document.querySelector('.con')
    const myChart2 = echarts.init(con)
    // 获取地图数据
    axios.get('https://geo.datav.aliyun.com/areas_v3/bound/100000.json').then(res => {
        // 注册地图
        echarts.registerMap('China', res.data)
        const option2 = {
            series: [
                {
                    name: '中国地图',
                    type: 'map',
                    map: 'China',// 和上面注册地图时的值要保持一致
                    label: {
                        show: true
                    }
                }
            ]
        }
        myChart2.setOption(option2)
    })

    const righttop = document.querySelector('.righttop')
    const myChart3 = echarts.init(righttop)
    const option3 = {
        legend: {
            bottom: 'left'
        },
        series: [
            {
                name: 'Access From',
                type: 'pie',
                radius: '50%',
                data: [
                    { value: 1048, name: 'Search Engine' },
                    { value: 735, name: 'Direct' },
                    { value: 580, name: 'Email' },
                    { value: 484, name: 'Union Ads' },
                    { value: 300, name: 'Video Ads' }
                ],
            }
        ]
    };
    myChart3.setOption(option3)
})


</script>

<style lang="scss" scoped>
.home-page {
    display: flex;

    .left {
        width: 25%;
    }

    .con {
        width: 50%;
    }

    .right {
        width: 25px;
    }
}
</style>